<template>
    <div class="profile-page">
        <div class="user-info">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-md-10 offset-md-1">
                        <img :src="profile.profile.image" class="user-img" />
                        <h4>{{ profile.profile.username }}</h4>
                        <p>
                            {{ profile.profile.bio }}
                        </p>
                        <button class="btn btn-sm btn-outline-secondary action-btn"
                            v-if="userinfo?.username !== profile.profile.username">
                            <i class="ion-plus-round"></i>
                            &nbsp; Follow {{ profile.profile.username }}
                        </button>
                        <button class="btn btn-sm btn-outline-secondary action-btn" v-else
                            @click.prevent="toSettings()">
                            <i class="ion-gear-a"></i>
                            &nbsp; Edit Profile Settings
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-md-10 offset-md-1">
                    <div class="articles-toggle">
                        <ul class="nav nav-pills outline-active">
                            <li class="nav-item" @click.prevent="OnMyArticle">
                                <a class="nav-link" :class="{ active: isMyArticleActive }" href="">My
                                    Articles</a>
                            </li>
                            <li class="nav-item" @click.prevent="OnFavoritedArticles">
                                <a class="nav-link" :class="{ active: isFavoritedArticlesActive }" href="">Favorited
                                    Articles</a>
                            </li>
                        </ul>
                    </div>

                    <div class="article-preview" v-for="article in my_articles.articles">
                        <div class="article-meta">
                            <a href="/profile/eric-simons"><img :src="article.author.image" /></a>
                            <div class="info">
                                <a href="/profile/eric-simons" class="author">{{ article.author.username }}</a>
                                <span class="date">{{ article.updatedAt }}</span>
                            </div>
                            <button class="btn btn-outline-primary btn-sm pull-xs-right">
                                <i class="ion-heart"></i> {{ article.favoritesCount }}
                            </button>
                        </div>
                        <RouterLink :to="{ name: 'article', params: { slug: article.slug } }" class="preview-link">
                            <h1>{{ article.title }}</h1>
                            <p>{{ article.description }}</p>
                            <span>Read more...</span>
                            <ul class="tag-list">
                                <li class="tag-default tag-pill tag-outline" v-for="tag in article.tagList">{{ tag }}
                                </li>
                                <!-- <li class="tag-default tag-pill tag-outline">implementations</li> -->
                            </ul>
                        </RouterLink>
                    </div>

                    <!-- <div class="article-preview">
            <div class="article-meta">
                <a href="/profile/albert-pai"><img src="http://i.imgur.com/N4VcUeJ.jpg" /></a>
                <div class="info">
                <a href="/profile/albert-pai" class="author">Albert Pai</a>
                <span class="date">January 20th</span>
                </div>
                <button class="btn btn-outline-primary btn-sm pull-xs-right">
                <i class="ion-heart"></i> 32
                </button>
            </div>
            <a href="/article/the-song-you" class="preview-link">
                <h1>The song you won't ever stop singing. No matter how hard you try.</h1>
                <p>This is the description for the post.</p>
                <span>Read more...</span>
                <ul class="tag-list">
                <li class="tag-default tag-pill tag-outline">Music</li>
                <li class="tag-default tag-pill tag-outline">Song</li>
                </ul>
            </a>
            </div> -->

                    <ul class="pagination">
                        <li class="page-item active">
                            <a class="page-link" href="">1</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="">2</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { useRoute } from 'vue-router'
import axios from '../utils/request';
import { storeToRefs } from 'pinia';
import { useUserStore } from '../store/user';
import type { MultiArticles, ProfileReq } from '../models';
import { onMounted, ref } from 'vue';
import router from '../router';

let route = useRoute();
let store = useUserStore();
const { userinfo } = storeToRefs(store);

let profile = ref<ProfileReq>({
    profile: {
        username: '',
        bio: '',
        image: '',
        following: false
    }
})
let my_articles = ref<MultiArticles>({
    articles: [],
    articlesCount: 0
})
function toSettings() {
    router.push({ name: 'settings' });
}
let isMyArticleActive = ref<boolean>(true);
let isFavoritedArticlesActive = ref<boolean>(false);
function OnMyArticle() {
    isMyArticleActive.value = true;
    isFavoritedArticlesActive.value = false;
    axios.get('/articles', { params: { author: profile.value.profile.username } }).then(res => {
        my_articles.value = res.data;
    })
}
function OnFavoritedArticles() {
    isMyArticleActive.value = false;
    isFavoritedArticlesActive.value = true;
    axios.get('/articles', { params: { favorited: profile.value.profile.username } }).then(res => {
        my_articles.value = res.data;
    })
}

onMounted(() => {
    axios.get(`/profiles/${route.params.username}`).then(res => {
        profile.value = res.data;
        axios.get('/articles', { params: { author: profile.value.profile.username } }).then(res => {
            my_articles.value = res.data;
        })
    })
})

</script>
<style scoped></style>
